<template>
  <div class="waitConfirmed">
    <div class="searchBox">
      <Form label-position="right" :label-width="130" class="search-form">
        <Row>
          <Col span="5">
            <FormItem label="检测计划：">
              <Input type="text" v-model="searchParams.planName" :placeholder="`${$t('common.inputInfo')}`" clearable class="inputBorder" :maxlength="32"></Input>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="设备类别：">
              <Select v-model="searchParams.categoryId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item) of category" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
<!--          <Col span="5">-->
<!--            <FormItem label="检测方式：">-->
<!--              <Select v-model="searchParams.maintainType" filterable clearable placeholder="请选择检测方式">-->
<!--                <Option v-for="(item,index) of cycle" :value="item.key" :key="index">{{ item.name }}</Option>-->
<!--              </Select>-->
<!--            </FormItem>-->
<!--          </Col>-->
<!--          <Col span="5">-->
<!--            <FormItem :label="`${$t('maintenance.EquipmentNo')}:`" >-->
<!--              <Input type="text" v-model="searchParams.deviceMId" :placeholder="`${$t('common.inputInfo')}`" clearable class="inputBorder" :maxlength="32"></Input>-->
<!--            </FormItem>-->
<!--          </Col>-->
          <Col span="5" style="display: flex; justifyContent: space-around">
            <Button type="primary" @click="changeNum" v-if="permission.dcmAcctestPlanList">{{$t('common.Query')}}</Button>
            <Button type="primary" shape="circle" @click="handleBatchDisabled" v-if="delIds.length && permission.dcmAcctestDisableRecordBatchEnable">批量启用</Button>
            <Button type="primary" shape="circle" @click="handleBatchDelete" v-if="delIds.length && permission.dcmAcctestPlanDeleteBatch">批量删除</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="tableContent">
      <Table ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn"
                @click="confirm(row)"
                v-if="permission.dcmAcctestDisableRecordEnable">
            <template v-if="new Date(row.planEndTime).getTime() > new Date().getTime()">
               <Icon type="android-cancel"></Icon>启用
            </template>
          </span>
          <span class="operationBtn" @click="look(row)" v-if="permission.dcmAcctestPlanQueryById"><Icon type="android-cancel"></Icon>{{$t('common.Check')}}</span>
          <span class="operationBtn" @click="edit(row)" v-if="permission.dcmAcctestPlanEdit"><Icon type="android-cancel"></Icon>{{$t('common.Edit')}}</span>
          <span class="operationBtn" @click="deleteRow(row)" v-if="permission.dcmAcctestPlanDelete"><Icon type="android-cancel"></Icon>{{$t('common.Delete')}}</span>
        </template>
      </Table>
    </div>
    <div class="pageWrap">
      <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
    </div>
    <Modal :mask-closable="false"
            v-model="delFaultCodeShowF"
            title=""
    >
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/del.png" alt="">
        </Col>
        <Col span="24" class="enableTips">
          <span>删除后不会继续生成检测任务，是否确认删除？</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default"  @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" :loading="delLoading" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
            v-model="confirmFaultCodeShowF"
            :title="`${$t('fault.Confirmremind')}`"
    >
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/pair.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span>启用后将按计划继续生成任务，是否确定启用？</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default"  @click="disabledCancel">{{$t('common.Cancle')}}</Button>
        <Button type="primary" :loading="disabledLoading" @click="disabledOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
            v-model="create"
            :title="`${$t('common.Edit')}`"
    >
      <Form class="formList" :model="formItem" label-position="top" inline>
         <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item" required>
          <Select v-model="formItem.classification" filterable clearable :placeholder="`${$t('common.inputInfo')}`" >
            <Option v-for="(item,index) of classification" :value="item.key" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="点检项目名称" required >
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem label="点检周期" class="item" required>
          <Select v-model="formItem.period" filterable clearable :placeholder="`${$t('common.inputInfo')}`" >
            <Option v-for="(item,index) of period" :value="item.key" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
         <FormItem :label="`${$t('spareParts.Specification')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.Checkmethods')}:`" >
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
         <FormItem :label="`${$t('maintenance.Checktools')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
       <FormItem :label="`${$t('maintenance.UpperLimit')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.LowerLimit')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
         <FormItem :label="`${$t('maintenance.Unit')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default"  @click="create = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary"  @click="addOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
            v-model="actualShowF"
            title="禁用记录"
            width="1200"
    >
      <Table :columns="receiveCol" :data="receivedataArr" ></Table>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'invalidPlan',
  props: ['device', 'invalidPlanList', 'invalidPlanTotal', 'permission','planIds'],
  data() {
    return {
      text: '',
      planId: '',
      delId: '',
      delIds: this.planIds,
      status: '',
      disabledStatus: '',
      total: this.invalidPlanTotal,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      delLoading: false,
      delFaultCodeShowF: false,//是否显示删除弹窗
      confirmFaultCodeShowF: false,
      disabledLoading: false,
      create:false,
      actualShowF: false,
      searchParams: {},
      formItem:{},
      formInline: {
        disableCycle: '',
        reason: ''
      },
      ruleValidate: {
        disableCycle: [
          { required: true, type: 'number', message: "请输入禁用周期", trigger: "blur" },
        ]
      },
      classification: [
        {name: 'CNC', key: 'CNC'},
        {name: 'PLC', key: 'PLC'},
        {name: 'IPC', key: 'IPC'},
      ],
      receiveCol: [
        {title: '禁用时间', key: 'createTime'},
        {title: '禁用人', key: 'createName'},
        {title: '禁用周期(月)', key: 'disableCycle'},
        {title: '禁用原因', key: 'reason'},
        {title: '启用时间', key: 'enableTime'},
        {title: '启用人', key: 'updateName'}
      ],
      period: [
        {name: '月度', key: 'month'},
        {name: '季度', key: 'quarter'},
        {name: '年度', key: 'year'},
      ],
      category: this.device,
      cycle: [
        {name: "全部", key: ""},
        {name: '定期点检', key: '1'},
        {name: '计数', key: '2'},
        {name: '计时', key: '3'},
      ],
      columns: [
        {type: 'selection', align: 'center', width: 60},
        {title: '检测计划', key: 'planName', width: 300,align: "center"},
        {title: '设备类别', key: 'categoryName', minWidth: 150,align: "center"},
        // {title: '保养位置', key: 'maintainPosition', minWidth: 100,align: "center"},
        // {title: '保养分类', key: 'classification', minWidth: 100,align: "center"},
        {title: '检测方式', key: 'acctestName', minWidth: 100,align: "center"},
        {title: '触发间隔', key: 'triggerCycleText', minWidth: 100,align: "center"},
        {title: '首次生成时间', key: 'firstTime', minWidth: 200,align: "center"},
        {title: '计划截止时间', key: 'planEndTime', minWidth: 200,align: "center"},
        {title: '任务存活时间', key: 'effectiveHourText', minWidth: 200,align: "center"},
        {title: '禁用记录', key: 'disableNum',minWidth: 100,align: "center",
          render: (h, params) => {
            if(params.row.disableNum>0){
              return h('div', [
                h('a', {
                  style: {

                  },
                  on: {
                    click: () => {
                      this.getActualNum(params.row)
                    }
                  }
                }, params.row.disableNum)
              ])
            }else{
              return h('div', [
                h('a', {}, params.row.disableNum)
              ])
            }
          }
        },
        {title: '创建人', key: 'realname', minWidth: 200,align: "center"},
        {title: '创建时间', key: 'createTime', minWidth: 200,align: "center"},
        {title: `${ this.$t('common.operation') }`, slot: "action", fixed: 'right', minWidth: 240, align: 'center'},
      ],
      data: this.invalidPlanList,
      receivedataArr: [],
      position: []
    }
  },
  watch: {
    device(newVal) {
      console.log(newVal)
      this.category = newVal
    },
    invalidPlanList(newVal) {
      this.data = newVal
    },
    invalidPlanTotal(newVal) {
      this.total = newVal
    },
    planIds(newVal) {
      this.delIds = newVal
    },
  },
  mounted() {},
  methods: {
    onSelectChange(selection){
      console.log(selection)
      let myArray = [];
      selection.map((item) => {
        myArray.push(item.id);
      });

      this.delIds = myArray;
    },
    deleteOk(){
      this.delLoading = true
      if (this.status == 0) {
        this.axios({
          method: 'delete',
          url: '/dms/dcmAcctestPlan/delete',
          params: {
            id: this.delId
          }
        }).then(res => {
          
          if(res.code === 200){
            this.searchList()
            this.$Message.success(({content:'删除成功！',duration:2,closable:true}));
          }else{
            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
          }
        }).finally(() => {
          this.delLoading = false
          this.delFaultCodeShowF = false
        })
      }else {
        this.axios({
          method: 'delete',
          url: '/dms/dcmAcctestPlan/deleteBatch',
          params: {
            ids: this.delIds.toString()
          }
        }).then(res => {
          
          if(res.code === 200){
            this.searchList()
            this.$Message.success(({content:'批量删除成功！',duration:2,closable:true}));
          }else{
            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
          }
        }).finally(() => {
          this.delLoading = false
          this.delFaultCodeShowF = false
        })
      }


    },
    confirm(row) {
      //点击展示提示删除弹窗
      this.confirmFaultCodeShowF = true;
      this.planId = row.id
      this.disabledStatus = 0
      console.log(row, 'row')
    },
    deleteRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.delId = row.id
      this.status = 0
      console.log(row, 'row')
    },
    handleBatchDelete() {
      console.log('批量')
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.status = 1
    },
    handleBatchDisabled() {
      this.disabledStatus = 1
      this.confirmFaultCodeShowF = true
    },
    disabledCancel() {
      this.confirmFaultCodeShowF = false
    },
    disabledOk() {
      this.disabledLoading = true
      if (this.disabledStatus == 0) {
        let data = {
          planId: this.planId,
        }
        this.axios({
          method: 'post',
          url: '/dms/dcmAcctestDisableRecord/enable',
          data
        }).then(res => {
          
          if(res.code === 200){
            this.searchList()
            this.$Message.success(({content:'启用成功！',duration:2,closable:true}));
          }else{
            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
          }
        }).finally(() => {
          this.confirmFaultCodeShowF = false
          this.disabledLoading = false
        })
      }else {
        let data = {
          planIds : this.delIds.toString(),
        }
        this.axios({
          method: 'post',
          url: '/dms/dcmAcctestDisableRecord/batchEnable',
          data
        }).then(res => {
          
          if(res.code === 200){
            this.searchList()
            this.$Message.success(({content:'批量启用成功！',duration:2,closable:true}));
          }else{
            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
          }
        }).finally(() => {
          this.confirmFaultCodeShowF = false
          this.disabledLoading = false
        })
      }

    },
    look(row) {
      this.$emit('changeDetailVisible', true, row.id)
    },
    getActualNum(row){
      if (this.permission.dcmAcctestDisableRecordList) {
        this.actualShowF = true
        this.getActualDetail(row.id)
        console.log(row, 'row')
      }

    },
    getActualDetail(planId) {
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestDisableRecord/list',
        params: {
          planId
        }
      }).then(res => {
        
        if(res.code === 200){
          this.receivedataArr = res.data
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.delLoading = false
        this.delFaultCodeShowF = false
      })
    },
    addOk() {},
    //分页
    changeNum(){
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val){
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      let params = {
        status: 1,
        pageNo: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const { length, last=length-1 } = arr
          this.$set(params, key, arr[last])
        }else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestPlan/list',
        params
      }).then(res => {
        
        if(res.code === 200){
          this.data = res.data.list
          this.total = res.data.total
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    ok() {},
    cancel() {},
    edit(row) {
      this.$emit('addMaintain', true, row)
    },
  },
}
</script>

<style scoped lang="scss">
  /*.waitConfirmed {*/
  /*  height: calc(100% - 100px);*/
  /*  overflow: scroll;*/
  /*}*/
  .addModal {
    .addProject {
      .modalTitle {
        position: relative;
        span {
          font-weight: bold;
          font-size: 20px;
        }
        .label {
          display: flex;
          flex-wrap: wrap;
          .item {
            display: flex;
            label {
              width: 150px;
              height: 100%;
              background: #F5F6F7;
            }
            & > div {
              width: 330px;
            }
          }
          .cycle {
            display: flex;
            .ivu-form-item-label {
              width: 150px;
              height: 100%;
              background: #F5F6F7;
            }
            .ivu-form-item-content {
              border: 1px solid #EEEEEE;
              width: 800px;
              .ivu-checkbox-wrapper {
                margin-left: 30px;
              }
            }
          }
        }
      }
      .modalTitle::before{
        content: '';
        position: absolute;
        width: 3px;
        height: 20px;
        top: 5px;
        left: -10px;
        background: #187BDB;
      }
      .tab {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .icon {
          border: 1px solid #187BDB;
          border-radius: 30px;
          padding: 5px 20px 5px 20px;
          display: flex;
          align-items: center;
          margin-left: 20px;
          color: #187BDB;
          i {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }


</style>
